<template>
  <div
    :style="{height: height === 'auto' ? '200px' : height + 'px'}"
    style="border-bottom: 2px solid #ffffff;
      "
  >
    <div style="height: 52px; border-left:2px solid #006F4DFF; color:#fff;">
      <div style="height:40%; fontSize:14px; fontWeight:500; display:flex; align-items:center;  padding-left:8px;
                    ">{{defaultConfig.numberName}}</div>
      <div style="height:60%; display:flex; align-items:center; padding-left:8px; ">
        <div style="fontSize:28px">{{data.number}}</div>
      </div>
    </div>
    <div
      style="height: calc(100% - 52px);width:100%"
      ref="myChart"
    >
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      height: 169,
      data: {
        number: 158, // 总数量
        AxisData: [
          ["2016-10-04 02:51:33", 10],
          ["2016-10-04 03:51:33", 25],
          ["2016-10-04 04:51:33", 13],
          ["2016-10-04 05:51:33", 30],
          ["2016-10-04 06:51:33", 20],
          ["2016-10-04 07:51:33", 30],
          ["2016-10-04 08:51:33", 20],
          ["2016-10-04 09:51:33", 41],
          ["2016-10-04 10:51:33", 22],
          ["2016-10-04 11:51:33", 50],
        ],
      }, // 得到的%
      defaultConfig: {
        numberName: "保障流线总数量 (条)",
        xName: "数据",
      },
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      var myChart = echarts.init(this.$refs.myChart);
      var option = {
        // 标题
        title: {
          show: this.showName,
          text: this.title,
        },
        color: ["#5a9a82"],
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            console.log(params);
            return (
              params[0].seriesName +
              " : " +
              params[0].value[1] +
              " <span>Sm<SUP>3</SUP></span>"
            );
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          top: "4%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            crossStyle: {
              color: "#999",
            },
          },
        },
        xAxis: [
          {
            type: "time",
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLabel: {
              show: false, //不显示坐标轴上的文字
            },
            axisLine: {
              show: false, //不显示坐标轴线
              lineStyle: {
                color: "#c0cbd3",
                width: 3, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            axisTick: {
              inside: true,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              inside: true,
              formatter: "{value}\n",
            },
            z: 10,
          },
        ],
        series: [
          {
            name: this.defaultConfig.xName,
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            sampling: "average",
            itemStyle: {
              normal: {
                color: "#11f1af",
                lineStyle: {
                  width: 3, //设置线条粗细
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2bd4a2",
                },
                {
                  offset: 1,
                  color: "#2bd4a200",
                },
              ]),
            },
            data: this.data.AxisData,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.css {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>